<div
  class="as-tab-pane tab-pane position-relative h-100 fade"
  id="as-{{ section.id }}-{{ forloop.index0 }}-{{ item.handle }}"
  role="tabpanel"
  aria-labelledby="{{ item.handle }}"
>
  <div class="as-content">
    <div class="d-flex flex-column h-100 flex-center">
      <div class="w-100 flex-grow-1">
        <div class="accordion accordion-flush rounded-2 bg-white overflow-hidden p-md-6 pt-md-4 p-5 pt-1">
          {%- for article in faq_blog_posts.articles -%}
            <div class="accordion-item border-bottom {% if forloop.index > 10 %} d-none {% endif %}">
              <div
                class="accordion-header"
                id="accordion-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
              >
                <button
                  class="accordion-button collapsed px-0 py-4"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
                  aria-expanded="false"
                  aria-controls="as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
                >
                  <span class="pe-3">{{ article.title }}</span>
                </button>
              </div>
              <div
                id="as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
                class="accordion-collapse collapse"
                aria-labelledby="accordion-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}"
              >
                <div class="richtext-description accordion-body px-0 text-muted fs-small pb-4 pt-0">
                  {{ article.content }}
                </div>
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>
      {%- paginate faq_blog_posts.articles by 10 -%}
        {%- if paginate.pages > 1 -%}
          <div class="btn btn-lg rounded-2 mx-2 btn-outline-primary  with-stretched-link cursor-pointer mt-4 as-view-more">
            {{ 'sections.faq_list.view_more' | t }}
          </div>
        {%- endif -%}
      {%- endpaginate -%}
    </div>
  </div>
</div>
